<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="yaozheng">
        <div class="yzding">
            <img @click="my()"
                src="https://img1.baidu.com/it/u=3226426397,280440904&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724259600&t=a868ef14a81e60c085539906d7bdbbf5"
                alt="">
            <van-grid :column-num="3" @click="msg()">
                <van-grid-item icon=" iconfont icon-dangan" />
            </van-grid>
        </div>
        <div class="yztab">
            <van-tabs>
                <van-tab title="常见病症">
                    <van-sidebar>
                           <van-sidebar-item
                            v-for="(department, index) in departments"
                            :key="index"
                            :title="department.title"
                            :style="{ backgroundColor: department.specialStyle ? '#ccc' : '' }"
                            />
                    </van-sidebar>
                    <div class="neke" @click="omxgy()">
                        <div v-for="(item, index) in data" :key="index">
                            <div>{{ item }}</div>
                        </div>
                    </div>
                </van-tab>
                <van-tab disabled></van-tab>
                <van-tab title="常见药品">
                <!-- <div v-for="(item, index) in List" :key="index">
                    {{ item.name}}
                   <img :src="item.picture" alt="">
                </div> -->
                <van-tree-select
              
                  v-model:main-active-index="activeIndex"
                  :items="items"
                   />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import router from '@/router'
// import {shuju} from '@/api/index'
import {getList} from '../../api/index'
const data=["肺炎串书","泄泻（腹泻病）","小儿厌食症","消化性溃疡","慢性肝炎","结核病","长期便秘","新缺乏","反复外感发热","新生儿肺炎","化脓"];
const departments =[
     { title: '内科', specialStyle: false },//注意：这里没有重复的科室，所以不需要特殊样式
        { title: '眼科', specialStyle: true },
        { title: '骨科', specialStyle: true },
        { title: '小儿科', specialStyle: true },
        { title: '急诊科', specialStyle: true }, // 注意：急诊科重复了，这里只保留一个
        { title: '皮肤性病', specialStyle: true },
        { title: '耳鼻喉科', specialStyle: true },
        { title: '神经病科', specialStyle: true },
      ];
const List=ref("")
//数据
// getList().then(res=>{
   
// //    List.value = res.data.data
// // //    console.log(List,'123')
// //  console.log('数据来了',List.value);
// // })
const omxgy = () => {
    router.push('/home/disease/mxgy')
};

const my = () => {
    router.push('/my')
};

const msg = () => {
    router.push('/message')
}
    const activeId = ref(1);
    const activeIndex = ref(0);
    const items = [
      {
        text: '感冒用药',
        children: [
          { text: '小儿感冒颗粒', id: 1 },
          { text: '豉翘清热颗粒', id: 2 },
          { text: ' 酚黄那敏颗粒', id: 3,},
          { text: '清肺化痰颗粒', },
          { text: '布洛芬混悬液', },
          { text: '热咳喘口股液', },
        ],
      },
      {
        text: '风湿骨伤',
        children: [
          { text: '小儿感冒颗粒', id: 4 },
          { text: '小儿感冒颗粒', id: 5 },
          { text: '小儿感冒颗粒', id: 6 },
        ],
      },
        {
        text: '两性健康',
        children: [
          { text: '小儿感冒颗粒', id: 4 },
          { text: '小儿感冒颗粒', id: 5 },
          { text: '小儿感冒颗粒', id: 6 },
        ],
      },
        {
        text: '儿童用药',
        children: [
          { text: '小儿感冒颗粒', id: 4 },
          { text: '小儿感冒颗粒', id: 5 },
          { text: '小儿感冒颗粒', id: 6 },
        ],
      },
        {
        text: '三高用药',
        children: [
          { text: '小儿感冒颗粒', id: 4 },
          { text: '小儿感冒颗粒', id: 5 },
          { text: '小儿感冒颗粒', id: 6 },
        ],
      },
      { text: '其他药品', id: 7 },
    ];



</script>

<style lang="scss">
.yaozheng {
    width: 100%;
    height: 100%;
}

.yzding {
    width: 100%;
    height: 60px;
    // background-color: aqua;
    display: flex;
    justify-content: space-between;

    img {
        width: 40px;
        height: 40px;
        border-radius: 30px;
        margin-top: 10px;
        // float: left;
    }

    span {
        font-size: 20px;
        margin-top: 18px;
        // float: right;

    }
}

.yztab {
    width: 100%;
    height: 570px;

    .van-tab {
        width: 100%;
        height: 100%;
        background-color: #ccc;

    }

    .neke {
        width: 258px;
        height: 540px;
        position: absolute;
        right: 0;
        top: 44px;

        div {
            width: 128px;
            height: 49px;
            line-height: 60px;
            float: left;
        
        }
    }
}
.van-sidebar {
height: 500px;
 div{
    width: 114px;
    height: 66px;
    margin-top: 17px;
 }
}
.van-tree-select__content{
    height: 500px;
}
</style>